import React, { Component, Fragment } from 'react';
import { Dispatch } from 'redux';
import { connect } from 'dva';

import { Form } from '@ant-design/compatible';
import PageHeader from '@/components/PageHeader';
import { FormComponentProps } from '@ant-design/compatible/es/form';

import { Card, Descriptions, Timeline } from 'antd';

import { DetailInfoItem } from './data';

import '@ant-design/compatible/assets/index.css';

const statusText = ['禁用', '启用'];

interface SmallWhiteProps extends FormComponentProps {
  dispatch: Dispatch;
  detailInfo: DetailInfoItem;
  location: {
    state?: {
      id: number;
    };
  };
}

@connect(({
  cooperationCompanySmallWhiteDetail: { detailInfo },
}: any) => ({ detailInfo }))

class SmallWhiteInfoElem extends Component<SmallWhiteProps> {
  componentDidMount() {
    const { location: { state } } = this.props;
    if (state) {
      this.fetchAction('fetch', { id: state.id, loadUser: 1 });
    }
  }

  fetchAction = (typeName: string, payload: any = {}) => {
    const { dispatch } = this.props;
    dispatch({
      type: `cooperationCompanySmallWhiteDetail/${typeName}`,
      payload,
    });
  };

  render() {
    const { detailInfo } = this.props;

    return (
      <Fragment>
        <PageHeader />
        <Card bordered={false} title="基础信息" className="paddingB10">
          <Descriptions>
            <Descriptions.Item label="设备名称">小白盒子</Descriptions.Item>
            <Descriptions.Item label="　　类型">物流中心</Descriptions.Item>
            <Descriptions.Item label="　　状态">{statusText[detailInfo.status]}</Descriptions.Item>
          </Descriptions>
          <Descriptions>
            <Descriptions.Item label="物流中心">{detailInfo.logisName}</Descriptions.Item>
          </Descriptions>
        </Card>
        <Card bordered={false} title="合作方系统信息" className="paddingB10">
          <Descriptions>
            <Descriptions.Item label="合作账户">{detailInfo.account}</Descriptions.Item>
            <Descriptions.Item label="合作密码">{detailInfo.password}</Descriptions.Item>
          </Descriptions>
        </Card>
        <Card bordered={false} title="设备绑定" className="paddingB10">
          <Descriptions>
            {detailInfo.deviceNoList
              && detailInfo.deviceNoList.split(',').map((item: any) => (
                <Descriptions.Item label="设备编号" key={item}>{item}</Descriptions.Item>
              ))}
          </Descriptions>
        </Card>
        <Card bordered={false} title="日志信息">
          <Timeline>
            <Timeline.Item>最近操作人：{detailInfo.updateUserName}</Timeline.Item>
            <Timeline.Item>最近操作时间：{detailInfo.updateTime}</Timeline.Item>
            <Timeline.Item>创建人：{detailInfo.createUserName}</Timeline.Item>
            <Timeline.Item>创建时间：{detailInfo.createTime}</Timeline.Item>
          </Timeline>
        </Card>
      </Fragment>
    );
  }
}

export default Form.create<SmallWhiteProps>()(SmallWhiteInfoElem);
